import React,{Component} from 'react';
import CSSModules from 'react-css-modules';
import axios from 'axios';
import styles from './subscribe.scss';
import {NavLink} from 'react-router-dom';
import {Navgaitor,Banner} from '../../../components';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';


class Subscribe extends Component {

    
    constructor(props) {
        super(props);
        this.state = {
            subscribelist: [],
            pagenum:1,
            typenum:1,
            totalnum:20
        };
      }

    fetchList(params={
        typenum: this.props.location.pathname.toString().split('/')[6]!=0 ?this.props.location.pathname.toString().split('/')[6]:1,
        page:1,
    }){
        var url=`http://47.92.98.104:8080/zhuiying/findmovie${params.typenum}`;
            axios({
                url:url,
                method:'get'
            }).then(res=>{
                this.setState({
                    totalnum:res.data.length,
                    subscribelist: this.state.pagenum<=parseInt(this.state.totalnum/20)  ? res.data.splice((this.state.pagenum-1)*20,20):res.data.splice((this.state.pagenum-1)*20,this.state.totalnum%20),   

                })

            });
            
        
            
    }
    
    componentWillReceiveProps(nextProps){
        this.setState({
            typenum:nextProps.location.pathname.toString().split('/')[6],
            pagenum:1
        },()=>{
            this.fetchList({typenum:this.state.typenum})
        })
            
        
        }

    componentDidMount(){
         this.fetchList();
    }

    changePage=e=>{
        var page=e.target.getAttribute('data-page');
        this.state.pagenum=page;
        this.fetchList({
            typenum: this.props.location.pathname.toString().split('/')[6]!=0 ?this.props.location.pathname.toString().split('/')[6]:1,
            page:this.state.pagenum
        })
    }

    next(){
        if(this.state.pagenum<Math.ceil(this.state.totalnum/20)){
            this.setState({
                pagenum:this.state.pagenum+1
            })
        this.fetchList({
            typenum: this.props.location.pathname.toString().split('/')[6]!=0 ?this.props.location.pathname.toString().split('/')[6]:1,
            page:this.state.pagenum
        }) 

        }
        
        
    }

    previous(){
        if(this.state.pagenum>1){
            this.setState({
                pagenum:this.state.pagenum-1
            })
        this.fetchList({
            typenum: this.props.location.pathname.toString().split('/')[6]!=0 ?this.props.location.pathname.toString().split('/')[6]:1,
            page:this.state.pagenum
        }) 
        }

    }

    showPages=()=>{
        var pageJsx=[];
        var pagenumber=Math.ceil(this.state.totalnum/20)
        for(var i=1;i<=pagenumber;i++){
            pageJsx.push(
                <li key={i} styleName="page-item"><a href="javascript:void(0)" onClick={e=>this.changePage(e)} data-page = {i}>{i}</a></li>
            )
        }
        return pageJsx
    }

    showLists(){
        var jsx=[];
        var listlength=this.state.subscribelist.length
        if(this.state.subscribelist!=''){
            for(var i=0;i<listlength;i++){
                jsx.push(
                    <li key={i}>
                    <a>
                        <img src={this.state.subscribelist[i].cimage} styleName="item-image"/>
                        <h3 styleName="item-h3">{this.state.subscribelist[i].cname}</h3>
                    </a>
                </li>
                )
            }
        }
        return jsx;

    }

    render(){
        var charges=this.props.match.params.charges?this.props.match.params.charges:0;
        var type=this.props.match.params.type?this.props.match.params.type:0;
        var year=this.props.match.params.year?this.props.match.params.year:0;
        var area=this.props.match.params.area?this.props.match.params.area:0;
        var subtype=this.props.match.params.subtype?this.props.match.params.subtype:0;
        var play=this.props.match.params.play?this.props.match.params.play:0;
        
        return <div styleName="vip-subscribe">
            <Banner/>
            <Navgaitor/>
            <div styleName="subscribe-content">
                
                <div className="wrapper">
                    
                    <ul styleName="type-list">
                        <li styleName="type-item" className="clearfix">
                            <div styleName="s-title">按资费</div>
                            <div styleName="s-list" className="clearfix">
                                <NavLink to={`/subscribe/0/${type}/${year}/${area}/${subtype}/${play}`} activeClassName='active'>全部</NavLink>
                                <NavLink to={`/subscribe/1/${type}/${year}/${area}/${subtype}/${play}`} activeClassName='active'>会员用券</NavLink>
                                <NavLink to={`/subscribe/2/${type}/${year}/${area}/${subtype}/${play}`} activeClassName='active'>会员免费</NavLink>                                
                            </div>
                        </li>
                        <li styleName="type-item" className="clearfix">
                            <div styleName="s-title">按类型</div>
                            <div styleName="s-list" className="clearfix">
                                <NavLink to={`/subscribe/${charges}/0/${year}/${area}/${subtype}/${play}`} activeClassName='active'>全部</NavLink>
                                <NavLink to={`/subscribe/${charges}/1/${year}/${area}/${subtype}/${play}`} activeClassName='active'>CCTV6热播影片</NavLink>
                                <NavLink to={`/subscribe/${charges}/2/${year}/${area}/${subtype}/${play}`} activeClassName='active'>好莱坞大片</NavLink> 
                                <NavLink to={`/subscribe/${charges}/3/${year}/${area}/${subtype}/${play}`} activeClassName='active'>AP专享</NavLink>  
                                <NavLink to={`/subscribe/${charges}/4/${year}/${area}/${subtype}/${play}`} activeClassName='active'>系列影片</NavLink>
                            </div> 
                            <div styleName="movie-type" className="clearfix">
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/1/${play}`} activeClassName='active'>动作</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/2/${play}`} activeClassName='active'>喜剧</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/3/${play}`} activeClassName='active'>爱情</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/4/${play}`} activeClassName='active'>冒险</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/5/${play}`} activeClassName='active'>惊悚</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/6/${play}`} activeClassName='active'>青春</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/7/${play}`} activeClassName='active'>战争</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/8/${play}`} activeClassName='active'>科幻</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/9/${play}`} activeClassName='active'>体育</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/10/${play}`} activeClassName='active'>武侠</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/11/${play}`} activeClassName='active'>动画</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/12/${play}`} activeClassName='active'>少儿</NavLink>
                            </div>
                                    
                        </li>
                        <li styleName="type-item" className="clearfix">
                            <div styleName="s-title">按年代</div>
                            <div styleName="s-list" className="clearfix">
                                <NavLink to={`/subscribe/${charges}/${type}/0/${area}/${subtype}/${play}`} activeClassName='active'>全部</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/1/${area}/${subtype}/${play}`} activeClassName='active'>2018</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/2/${area}/${subtype}/${play}`} activeClassName='active'>2017</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/3/${area}/${subtype}/${play}`} activeClassName='active'>2016</NavLink>           
                                <NavLink to={`/subscribe/${charges}/${type}/4/${area}/${subtype}/${play}`} activeClassName='active'>2015</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/5/${area}/${subtype}/${play}`} activeClassName='active'>2014-2011</NavLink>  
                                <NavLink to={`/subscribe/${charges}/${type}/6/${area}/${subtype}/${play}`} activeClassName='active'>2010-2000</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/7/${area}/${subtype}/${play}`} activeClassName='active'>更早</NavLink>                               
                            </div>
                        </li>
                        <li styleName="type-item" className="clearfix">
                            <div styleName="s-title">按地区</div>
                            <div styleName="s-list" className="clearfix">
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/0/${subtype}/${play}`} activeClassName='active'>全部</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/1/${subtype}/${play}`} activeClassName='active'>内地</NavLink>
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/2/${subtype}/${play}`} activeClassName='active'>港台</NavLink>     
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/3/${subtype}/${play}`} activeClassName='active'>欧美</NavLink>    
                                <NavLink to={`/subscribe/${charges}/${type}/${year}/4/${subtype}/${play}`} activeClassName='active'>其他</NavLink>                                
                            </div>
                        </li>
                    </ul>
                    <ul styleName="sort-tab" className="clearfix">
                        <li>
                            <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/${subtype}/0`} activeClassName='sort-active'>本周热播</NavLink> 
                        </li>
                        <li>
                            <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/${subtype}/1`} activeClassName='sort-active'>历史热播</NavLink>
                        </li>
                        <li>
                            <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/${subtype}/2`} activeClassName='sort-active'>最新上线</NavLink>
                        </li>
                        <li>
                            <NavLink to={`/subscribe/${charges}/${type}/${year}/${area}/${subtype}/3`} activeClassName='sort-active'>最受好评</NavLink>
                        </li>
                    </ul>
                    <ul styleName="s-movie-list" className="clearfix">
                        {this.showLists()}
                    </ul>
                    <div styleName="page">
                        <nav aria-label="Page navigation">
                            <ul className="pagination" styleName="page-nav">
                                <li styleName="page-item" onClick={()=>this.previous()}><a href="javascript:void(0)">上一页</a></li>
                                {this.showPages()}
                                <li styleName="page-item" onClick={()=>this.next()}><a href="javascript:void(0)">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    }
}

export default CSSModules(Subscribe, styles,{allowMultiple:true});

